<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Export to Excel</title>
</head>
<body>
<div id="list" style="display:flex">
    <table>
        <tbody>
            <tr>
                <td>
                    <div id="source_table" style="width:50%; height:200px;">
                        <table>
                            <thead>
                                <tr>
                                    <th>Module</th>
                                    <th>Layer</th>
                                    <th>Ope_No</th>
									<th>Flow</th>
									<th>Product</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Module1</td>
                                    <td style="background-color: green;">Data1</td>
                                    <td style="background-color: red;">Data2</td>
									<td style="background-color: red;">Flow1</td>
									<td style="background-color: red;">Product1</td>
                                </tr>
                                <tr>
                                    <td>Module2</td>
                                    <td style="background-color: green;">Data3</td>
                                    <td style="background-color: red;">Data4</td>
									<td style="background-color: red;">Flow1</td>
									<td style="background-color: red;">Product2</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
                <td style="width:4px;"></td>
                <td>
                    <div id="target_table" style="width:50%; height:200px;">
                        <table>
                            <thead>
                                <tr>
                                    <th>Module</th>
                                    <th>Layer</th>
                                    <th>Ope_No</th>
									<th>Flow</th>
									<th>Product</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Module1</td>
                                    <td style="background-color: green;">Data1</td>
                                    <td style="background-color: red;">Data2</td>
									<td style="background-color: red;">Flow1</td>
									<td style="background-color: red;">Product1</td>
                                </tr>
                                <tr>
                                    <td>Module2</td>
                                    <td style="background-color: green;">Data4</td>
                                    <td style="background-color: red;">Data5</td>
									<td style="background-color: red;">Flow1</td>
									<td style="background-color: red;">Product1</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<button onclick="exportToExcel()">Export to Excel</button>

<script>
    function exportToExcel() {
        const sourceTable = document.getElementById('source_table').querySelector('table');
        const targetTable = document.getElementById('target_table').querySelector('table');

        const modules = {};
        const moduleFieldIndex = 0;

        const sourceRows = sourceTable.rows;
        const targetRows = targetTable.rows;

        // 按 Module 分组
        for (let i = 1; i < sourceRows.length; i++) { // Start from 1 to skip header
            const sourceRow = sourceRows[i];
            const sourceModule = sourceRow.cells[moduleFieldIndex].innerText;

            if (!modules[sourceModule]) {
                modules[sourceModule] = {
                    sourceRows: [],
                    targetRows: []
                };
            }
            modules[sourceModule].sourceRows.push(sourceRow);
        }

        for (let i = 1; i < targetRows.length; i++) { // Start from 1 to skip header
            const targetRow = targetRows[i];
            const targetModule = targetRow.cells[moduleFieldIndex].innerText;

            if (!modules[targetModule]) {
                modules[targetModule] = {
                    sourceRows: [],
                    targetRows: []
                };
            }
            modules[targetModule].targetRows.push(targetRow);
        }

        // 生成 Excel 文件
        let excelContent = `
            <?xml version="1.0"?>
            <?mso-application progid="Excel.Sheet"?>
            <Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"
                      xmlns:o="urn:schemas-microsoft-com:office:office"
                      xmlns:x="urn:schemas-microsoft-com:office:excel"
                      xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet"
                      xmlns:html="http://www.w3.org/TR/REC-html40">
                <Styles>
                    <Style ss:ID="Default" ss:Name="Normal">
                        <Alignment ss:Vertical="Bottom"/>
                        <Borders/>
                        <Font ss:FontName="Calibri" ss:Size="11" ss:Color="#000000"/>
                        <Interior/>
                        <NumberFormat/>
                        <Protection/>
                    </Style>
                    <Style ss:ID="Header">
                        <Font ss:FontName="Calibri" ss:Size="11" ss:Color="#FFFFFF" ss:Bold="1"/>
                        <Interior ss:Color="#333333" ss:Pattern="Solid"/>
                    </Style>
                    <Style ss:ID="Green">
                        <Interior ss:Color="#00FF00" ss:Pattern="Solid"/>
                    </Style>
                    <Style ss:ID="Red">
                        <Interior ss:Color="#FF0000" ss:Pattern="Solid"/>
                    </Style>
                    <Style ss:ID="Gray">
                        <Interior ss:Color="#808080" ss:Pattern="Solid"/>
                    </Style>
                    <Style ss:ID="White">
                        <Interior ss:Color="#FFFFFF" ss:Pattern="Solid"/>
                    </Style>
                    <Style ss:ID="Warning">
                        <Font ss:FontName="Calibri" ss:Size="11" ss:Color="#FF0000" ss:Bold="1"/>
                        <Interior ss:Color="#FFFF00" ss:Pattern="Solid"/>
                    </Style>
                </Styles>
        `;

        // 添加原始数据到第一个 Sheet
        excelContent += `
            <Worksheet ss:Name="Original Data">
                <Table>
                    <!-- 添加警示框 -->
                    <Row>
                        <Cell ss:StyleID="Warning" ss:MergeAcross="10">
                            <Data ss:Type="String">公司机密 - 严禁外传</Data>
                        </Cell>
                    </Row>
                    <Row>
                        <Cell ss:StyleID="Header"><Data ss:Type="String">Module</Data></Cell>
                        <Cell ss:StyleID="Header"><Data ss:Type="String">Layer</Data></Cell>
                        <Cell ss:StyleID="Header"><Data ss:Type="String">Ope_No</Data></Cell>
						<Cell ss:StyleID="Header"><Data ss:Type="String">Flow</Data></Cell>
						<Cell ss:StyleID="Header"><Data ss:Type="String">Product</Data></Cell>
                        <Cell ss:StyleID="White"><Data ss:Type="String"></Data></Cell> <!-- 间隙 -->
                        <Cell ss:StyleID="Header"><Data ss:Type="String">Module</Data></Cell>
                        <Cell ss:StyleID="Header"><Data ss:Type="String">Layer</Data></Cell>
                        <Cell ss:StyleID="Header"><Data ss:Type="String">Ope_No</Data></Cell>
						<Cell ss:StyleID="Header"><Data ss:Type="String">Flow</Data></Cell>
						<Cell ss:StyleID="Header"><Data ss:Type="String">Product</Data></Cell>
                    </Row>
        `;

        // 添加 source 和 target 表格数据
        for (let i = 1; i < sourceRows.length; i++) {
            const sourceRow = sourceRows[i];
            const targetRow = targetRows[i];

            excelContent += `<Row>`;
            for (let j = 0; j < sourceRow.cells.length; j++) {
                const cell = sourceRow.cells[j];
                const bgColor = cell.style.backgroundColor || 'transparent';
                const styleID = bgColor === 'green' ? 'Green' : bgColor === 'red' ? 'Red' : 'Gray';
                excelContent += `<Cell ss:StyleID="${styleID}"><Data ss:Type="String">${cell.innerText}</Data></Cell>`;
            }
            excelContent += `<Cell ss:StyleID="White"><Data ss:Type="String"></Data></Cell>`; // 间隙
            for (let j = 0; j < targetRow.cells.length; j++) {
                const cell = targetRow.cells[j];
                const bgColor = cell.style.backgroundColor || 'transparent';
                const styleID = bgColor === 'green' ? 'Green' : bgColor === 'red' ? 'Red' : 'Gray';
                excelContent += `<Cell ss:StyleID="${styleID}"><Data ss:Type="String">${cell.innerText}</Data></Cell>`;
            }
            excelContent += `</Row>`;
        }

        excelContent += `
                </Table>
            </Worksheet>
        `;

        // 添加按 Module 分组的 Sheet
        for (const module in modules) {
            excelContent += `
                <Worksheet ss:Name="${module}">
                    <Table>
                        <Row>
                            <Cell ss:StyleID="Header"><Data ss:Type="String">Module</Data></Cell>
                            <Cell ss:StyleID="Header"><Data ss:Type="String">Layer</Data></Cell>
							<Cell ss:StyleID="Header"><Data ss:Type="String">Ope_No</Data></Cell>
							<Cell ss:StyleID="Header"><Data ss:Type="String">Flow</Data></Cell>
							<Cell ss:StyleID="Header"><Data ss:Type="String">Product</Data></Cell>
                            <Cell ss:StyleID="White"><Data ss:Type="String"></Data></Cell> <!-- 间隙 -->
                            <Cell ss:StyleID="Header"><Data ss:Type="String">Module</Data></Cell>
                            <Cell ss:StyleID="Header"><Data ss:Type="String">Layer</Data></Cell>
							<Cell ss:StyleID="Header"><Data ss:Type="String">Ope_No</Data></Cell>
							<Cell ss:StyleID="Header"><Data ss:Type="String">Flow</Data></Cell>
							<Cell ss:StyleID="Header"><Data ss:Type="String">Product</Data></Cell>
                        </Row>
            `;

            // 添加 source 和 target 表格数据
            const sourceRowsForModule = modules[module].sourceRows;
            const targetRowsForModule = modules[module].targetRows;

            for (let i = 0; i < sourceRowsForModule.length; i++) {
                const sourceRow = sourceRowsForModule[i];
                const targetRow = targetRowsForModule[i];

                excelContent += `<Row>`;
                for (let j = 0; j < sourceRow.cells.length; j++) {
                    const cell = sourceRow.cells[j];
                    const bgColor = cell.style.backgroundColor || 'transparent';
                    const styleID = bgColor === 'green' ? 'Green' : bgColor === 'red' ? 'Red' : 'Gray';
                    excelContent += `<Cell ss:StyleID="${styleID}"><Data ss:Type="String">${cell.innerText}</Data></Cell>`;
                }
                excelContent += `<Cell ss:StyleID="White"><Data ss:Type="String"></Data></Cell>`; // 间隙
                for (let j = 0; j < targetRow.cells.length; j++) {
                    const cell = targetRow.cells[j];
                    const bgColor = cell.style.backgroundColor || 'transparent';
                    const styleID = bgColor === 'green' ? 'Green' : bgColor === 'red' ? 'Red' : 'Gray';
                    excelContent += `<Cell ss:StyleID="${styleID}"><Data ss:Type="String">${cell.innerText}</Data></Cell>`;
                }
                excelContent += `</Row>`;
            }

            excelContent += `
                    </Table>
                </Worksheet>
            `;
        }

        excelContent += `</Workbook>`;

        // 创建下载链接
        const blob = new Blob([excelContent], { type: 'application/vnd.ms-excel' });
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = 'export.xls';
        link.click();
    }
</script>
</body>
</html>